<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <!--以最新的IE浏览器引擎去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--如果是双核浏览器，则使用webkit内核渲染-->
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keyword" content=""/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="stylesheet" href="" type="text/css"/>
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--[if lte 8]>
<script type="text/javascript">
    window.alert("您的浏览器版本过低");
    window.location.href = "http://www.browsehappy.com";
</script>
<![endif]-->
{$data.name}
<br>
{$data.email}
<div class="container">
    <form>
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" value="{$name|default='这个家伙很懒'}" id="name" class="form-control" placeholder="姓名">
        </div>
        <div class="form-group">
            <label for="idcard">身份证号</label>
            <input type="text" id="idcard" class="form-control" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="education">学历</label>
            <select class="form-control" name="education" id="education">
                <option value="">请选择学历...</option>
                <option value="小学">小学</option>
                <option value="初中">初中</option>
                <option value="高中">高中</option>
                <option value="高中">高中</option>
                <option value="大专">大专</option>
                <option value="本科">本科</option>
                <option value="硕士">硕士</option>
                <option value="博士">博士</option>
            </select>
        </div>
        <div class="form-group">
            <label for="education">性别:</label>
            <label class="radio-inline">
                <input type="radio"  name="sex" class="sex" value="1">男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" class="sex" value="0">女
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" class="sex" checked value="">不确定
            </label>
        </div>

        <button type="button" id="cha" class="btn btn-primary">查询</button>
    </form>
    <table id="app" class="table table-bordered">
        <caption><h3 class="text-danger">查询结果</h3></caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>省份证号</th>
            <th>学历</th>
        </tr>
        <tr v-for="item in searchData">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.idcard}}</td>
            <td>{{item.education}}</td>
        </tr>
        <tr v-show="searchData.length==0">
            <td colspan="4" class="text-center text-muted">
                <p>暂无数据...</p>
            </td>
        </tr>
        <tr v-show="searchData.length!=0">
            <td colspan="4" class="text-right text-muted">
                <div v-html="page"></div>
            </td>
        </tr>
    </table>
</div>


</body>
</html>
<script type="text/javascript">

    var vm = new Vue({
        el:'#app',
        data:{
            searchData:'',
            page:''
        }
    });

    $("#cha").on('click',function () {
        var ishave = 0;
        if($('#name').val()!=''){
            var name = $('#name').val();
            ishave = 1
        }
        if($('#idcard').val()!=''){
            var idcard = $('#idcard').val();
            ishave = 1
        }
        if($('#education').val()!=''){
            var education = $('#education').val();
            ishave = 1
        }

        if($('.sex:checked').val()!=''){
            var sex = $('.sex:checked').val();
            ishave = 1;
            alert(sex);
        }
        if(ishave==1){
            $.get("/index.php/Home/People/searchResult",
                {
                    name: name,
                    idcard: idcard,
                    education:education,
                    sex:sex
                },
                function(data){
                    console.log(data);
                    vm.searchData = data.data;   //将查询出来的数据给vue实例
                    vm.page = data.page;   //将查询出来的数据给vue实例
                },
                "JSON"
            );
        }
    })
</script>